import React, { Component } from 'react';
import RouterView from '../../router/router-view';
import { Layout ,Menu,Button} from 'antd';
import IsLogin from '../../utils/isLogin';
import request from '../../utils/request';
import {NavLink} from 'react-router-dom';


const { Header,Sider, Content } = Layout;



class Main extends Component {
    state = {
        username:'',
        role_id:'',
        menulist:[]
    }

    componentDidMount(){
        console.log(this.props.history)
        let {username,role_id} = localStorage.getItem('userinfo') ? JSON.parse(localStorage.getItem('userinfo')):{username:'',role_id:''}
        request.get('/api/resource',{params:{role_id}}).then(res => {
            if(res.data.code === 1){
                this.setState({
                    username,
                    menulist:res.data.data
                })
            }
        })
    }

    //退出
    exit = () => {
        //1.本地存储的数据userinfo  2.跳回登录
        // localStorage.removeItem('userinfo'); //全部清除
        localStorage.clear();
        this.props.history.push('/login');
    }

    render() {
        let {username,menulist} = this.state;
        return (
            <Layout>
                <Header>
                    欢迎：{username},<Button onClick={this.exit}>退出</Button>
                </Header>
                <Layout>
                    <Sider>
                        <Menu theme="dark" defaultSelectedKeys={[this.props.history.location.pathname]} mode="inline">
                            {menulist.map(item => <Menu.Item key={'/main'+item.resouce_route}>
                               <NavLink to={'/main'+item.resouce_route}>{item.resouce_name}</NavLink> 
                            </Menu.Item>)}
                        </Menu>
                    </Sider>
                    <Content> <RouterView routes={this.props.routes}></RouterView></Content>
                </Layout>
            </Layout>
        )
    }
}

export default IsLogin(Main)
